<template>
  <up-overlay :show = "show" @click = "show = false">
    <view class = "overlay-container"> <!-- 相对定位容器 -->
                                       <!-- 背景图（绝对定位覆盖整个容器） -->
      <image :src = "`${BASE_URL}/culture/star.png`" class = "bg-image" mode = "widthFix"/>

                                       <!-- 前景内容（钱包和文字，默认相对定位在背景之上） -->
      <view class = "foreground-content">
        <image :src = "`${BASE_URL}/culture/wallet.png`" class = "wallet-img"/>
        <view>
          <text class = "red-tip">恭喜！</text>
        </view>
        <view>
          <text class = "yellow-tip">增加20积分！</text>
        </view>
      </view>
    </view>
  </up-overlay>

  <view class = "back-button" @click = "handleBack">
    <u-icon name = "arrow-left" size = "60" color = "#ffffff"></u-icon>
  </view>
  <view class = "page">
    <!-- 图片容器 -->
    <view class = "image-container">
      <image :src = "imageUrl" mode = "widthFix"/>
    </view>
    <view class = "content-container flex-grow">
      <view class = "title">{{ title }}</view>
      <view class = "like-button" @click = "handleLike">
        <u-icon name = "heart-fill" size = "100" :color = "liked ? '#ff6f61' : '#ffffff'"></u-icon>
      </view>
      <view class = "description" v-for = "(desc, index) in descriptions" :key = "index">{{ desc }}</view>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue';
import {BASE_URL} from "../../../utils/api";

const show = ref(true);

// 调整图片路径引用
const imageUrl = `${BASE_URL}/culture/dragon.png`;
const title = '龙川舞龙';
const descriptions = ['舞龙，是龙川人民在重大节日中表演的传统民俗节目，它不但重观赏性，而且还极具地方特色。', '它寄托着人们祈盼风调雨顺、国泰民安、丰衣足食的美好愿望。', '这些龙的踪迹，都蕴含着龙川丰富多彩的龙文化。'];
const liked = ref(false);


function handleLike() {
  liked.value = !liked.value;
}

function handleBack() {
  uni.navigateBack(); // 使用 uni-app 的 API 返回上一页
}
</script>

<style scoped>
.overlay-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* 背景图片（绝对定位，覆盖整个容器） */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  /* 背景层级低于前景内容 */
}

/* 前景内容容器（垂直居中布局） */
.foreground-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40rpx;
}

.wallet-img {
  margin-bottom: 30rpx;
}

.red-tip {
  font-size: 62rpx;
  font-weight: bold;
  color: red;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.yellow-tip {
  font-size: 62rpx;
  font-weight: bold;
  color: yellow;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  background-color: #c7d6a5;
  position: relative;
  /* 添加相对定位，方便子元素绝对定位 */
}

.image-container {
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
  overflow: hidden;
}

.image-container image {
  width: 100%;
  height: auto;
}

.content-container {
  text-align: center;
  flex: 1;
}

.title {
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
  letter-spacing: 5px;
  /* 调整 letter-spacing */
}

.description {
  font-size: 28px;
  line-height: 1.5;
  margin-bottom: 0px;
  padding: 10px 10px 0 20px; /* 调整 padding，去除底部 padding */
  letter-spacing: 8.5px;
  /* 调整 letter-spacing */
  text-indent: 2em;
  /* 首行缩进两个字符宽度 */
  font-family: '黑体', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 0; /* 移除段落间距，由 space-between 控制 */
  text-align: justify;
}

.back-button {
  position: absolute;
  top: 30px;
  left: -5px;
  z-index: 10;
  transform: scale(0.5); /* 缩小按钮 */
}
</style>
